<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-06-28 19:04:03
-->
<template>
  <div class="News">
    <div class="top">
      <!-- 添加按钮 -->
      <el-button type="primary" style="width: 70px" @click="toAddHandler()"
        >新增</el-button
      >
      <!-- 搜索区域 -->
      <div class="search" style="float: right">
        <el-input
          placeholder="请输入内容"
          v-model="Newstitle"
          clearable
          style="width: 300px"
        >
        </el-input>
        <el-button type="primary" style="width: 70px" @click="getNewsListData"
          >搜索</el-button
        >
      </div>
    </div>
    <!-- 表格展示区域 -->
    <div class="tableContent" style="margin-top: 10px">
      <el-table :data="newsListData" style="width: 100%">
        <!-- prop=“data” 根据返回的数据 将要显示的字段 -->
        <!-- lable=“日期” 每一行的表头 -->
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center" width="180px">
        </el-table-column>
        <!-- 新闻标题 -->
        <el-table-column
          prop="title"
          label="新闻标题"
          align="center"
          width="550px"
        >
        </el-table-column>
        <!-- 新闻分类 -->
        <el-table-column prop="category.name" label="新闻分类" align="center">
        </el-table-column>
        <!-- 发布时间 -->
        <el-table-column label="发布时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.publishTime | fmtDate }}
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" style="width: 200px">
          <template v-slot:default="scope">
            <el-button
              type="text" 
              size="mini"
              @click="toEditHandler(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text" 
              size="mini"
              @click="toDeleteHandler(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框区域 -->
    <el-dialog v-if="visible" :title="dialogTitle" :visible.sync="visible" width="60%">
      <!-- 模态框表单 -->
      <el-form
        :model="form"
        :rules="Newsrules"
        ref="newsForm"
        label-width="100px"
      >
        <!-- 新闻标题 -->
        <el-form-item label="新闻标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="所属分类" prop="categoryId">
          <el-select v-model="form.categoryId">
            <el-option
              v-for="item in categroyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资讯" prop="content">
          <!-- <el-input v-model="form.content"></el-input>  -->
          <Tinymce v-model="form.content" :height="200"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="Submit" size="small">确 定</el-button>
      </span>
    </el-dialog> 
    <!-- 分页表格区域 -->
    <el-pagination
      background
      style="margin-top: 1em"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="parseInt(page)"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="parseInt(pageSize)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="parseInt(total)"
    >
    </el-pagination>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
//引入符文本编辑器的组件
import Tinymce from "../../components/Tinymce";
export default {
  // 注册组件
      components: {
        Tinymce,
      },
  data() {
    return {
      //分页新闻列表数据
      newsListData: [],
      pagelist: {},
      //当前页
      page: 1,
      //每页展示的条数
      pageSize: 5,
      //总条数
      total: 10,
      Newstitle: "",
      //模态框展示
      visible: false,
      form: {},
      categroyList: [],
      //设置模态框的标题
      dialogTitle: "",
      //新闻规则
      Newsrules: {
        title: [{ required: true, message: "请输入新闻标题", trigger: "blur" }],
        categoryId: [
          { required: true, message: "请选择所属分类", trigger: "change" },
        ],
      },
    };
  },
  //生命周期钩子函数
  created() {
    //自动运行
    this.getNewsListData();
    this.getAllCategory();
  },
  methods: {
    //添加事件
    toAddHandler() {
      //设置模态框的标题
      this.dialogTitle = "发布新闻资讯";
      this.form = {};
      this.visible = true;
    },
    // 更新事件
    toEditHandler(row) {
      // console.log(row);
      this.dialogTitle = "修改新闻资讯";
      //console.log(row.category.name);
      this.form = {...row};
      this.visible = true;
    },
    //删除事件
    toDeleteHandler(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "/article/deleteById";
        get(url, { id: row.id }).then((response) => {
          this.$message({ type: "success", message: response.message });
          this.getNewsListData();
        });
      });
    },
    //分页获取新闻列表数据方法
    async getNewsListData() {
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        title:this.Newstitle,
      };
      let res = await get("/article/pageQuery", params);
      //console.log(res.data.list);
      this.newsListData = res.data.list;
      // this.pagelist = res.data;
      this.total = res.data.total;
      //console.log(this.pagelist);
    },
    //查询所有资讯分类
    getAllCategory() {
      get("/category/findAll", {}).then((res) => {
        //console.log(res.data.list);
        this.categroyList = res.data;
        //console.log(res.data);
      });
    },
    //pageSize改变事件
    handleSizeChange(pageSize) {
      //将分页插件最新的参数赋值给params
      this.pageSize = pageSize;
      //调用方法
      this.getNewsListData();
    },
    //page改变事件
    handleCurrentChange(page) {
      // console.log(page);
      this.page = page;
      this.getNewsListData();
    },
    //模态框提交事件
     Submit() {
      // 1. 获取表单数据  this.form
      // 2. 交互
      let url = "/article/saveOrUpdate";
      post(url, this.form).then((response) => {
        // 3. 提示
        this.$message({ type: "success", message: response.message });
        // 4. 关闭模态框
        this.visible = false;
        // 5. 刷新数据
        this.getNewsListData();
      });
    },
  },
};
</script>

<style scoped>
</style>
